<template>
	<div class="group-item" :class="active ? 'active' : ''" @contextmenu.prevent="showRightMenu($event)">
		<div class="group-avatar">
			<!-- 群组头像，指定type为group，确保与用户头像缓存分离 -->
			<head-image :size="42" :name="group.showGroupName" :url="group.headImage"
				:id="group.id" type="group" :isShowUserInfo="false"> </head-image>
		</div>
		<div class="group-info">
			<div class="group-name">{{ group.showGroupName }}</div>
			<div class="group-dnd" v-if="group.isDnd" title="消息免打扰">
				<i class="fas fa-bell-slash"></i>
			</div>
		</div>
		<right-menu ref="rightMenu" @select="onSelectMenu"></right-menu>
	</div>
</template>

<script>
import HeadImage from '@/components/common/HeadImage.vue';
import RightMenu from '../common/RightMenu.vue';

export default {
	name: "groupItem",
	components: {
		HeadImage,
		RightMenu
	},
	data() {
		return {}
	},
	props: {
		group: {
			type: Object
		},
		active: {
			type: Boolean
		},
		menu: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		menuItems() {
			let items = [];
			items.push({
				key: 'CHAT',
				name: '进入群聊',
				icon: 'fas fa-comments'
			});
			items.push({
				key: 'INFO',
				name: '群聊信息',
				icon: 'fas fa-info-circle'
			});
			return items;
		}
	},
	methods: {
		showRightMenu(e) {
			if (this.menu) {
				this.$refs.rightMenu.open(e, this.menuItems);
			}
		},
		onSelectMenu(item) {
			switch (item.key) {
				case 'CHAT':
					this.$emit('chat', this.group);
					break;
				case 'INFO':
					// 触发点击事件，显示群聊详情
					this.$emit('info', this.group);
					// 模拟点击群组项来显示详情
					this.$el.click();
					break;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.group-item {
	height: 50px;
	display: flex;
	position: relative;
	padding: 5px 10px;
	align-items: center;
	background-color: var(--im-background);
	white-space: nowrap;
	cursor: pointer;

	&:hover {
		background-color: var(--im-background-active);
	}

	&.active {
		background-color: var(--im-background-active-dark);
	}

	.group-info {
		flex: 1;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding-left: 10px;
		height: 100%;
		text-align: left;
		overflow: hidden;

		.group-name {
			flex: 1;
			line-height: 50px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			font-size: var(--im-font-size);
		}

		.group-dnd {
			display: flex;
			align-items: center;
			margin-left: var(--im-spacing-xs);
			color: var(--im-text-color-secondary);
			font-size: 12px;
			opacity: 0.8;

			i {
				transition: all var(--im-transition-fast);
			}

			&:hover {
				color: var(--im-color-warning);
				opacity: 1;
			}
		}
	}
}
</style>
